<script setup lang="ts">
import { ref } from "vue";
import ReCol from "@/components/ReCol";
import { allocateRules } from "../utils/rule";
import { conditionsOutboundProps } from "../utils/types";
import type { FormInstance } from 'element-plus'
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { user_list } from "@/api/user"
const props = withDefaults(defineProps<conditionsOutboundProps>(), {
  formInline: () => ({
    labelOptions: [],
    tag_id: "",
    sourceOptions: [],
    source: "",
    intention: [],
    called_times: "",
    entry_at: "",
    numberBy: "all",
    number: "",
    sortMode: 1,
    outboundProject: "",
    intend_status: "",
    sourceId:null,
    showProgress:false,
    Process:0,
    staffId:"",
  })
});

const shortcuts = [
  {
    text: "上周",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    }
  },
  {
    text: "上个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    }
  },
  {
    text: "三个月前",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    }
  }
];

const intentionOptions = [{
  value: "noconnect",
  label: "未接通未确定"
}, {
  value: "unkown",
  label: "接通未确定"
}, {
  value: "refuse",
  label: "无意向"
}, {
  value: "intend",
  label: "有意向"
}]

const ruleFormRef = ref<FormInstance>();
const newFormInline = ref(props.formInline);

// 重置条件
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  newFormInline.value.number = null
  formEl.resetFields()
}

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
// 获取外呼任务
const userList = ref([])
function getUser(){
  user_list({
      page: 1,
      pagesize: 999,
      department_belong:"",
      key:"",
      status:""
    }).then(res=>{
      if(res.code == 1000){
        userList.value = res.data
      }
  })
}
</script>

<template>
  <div>
    <el-form
      ref="ruleFormRef"
      :model="newFormInline"
      :rules="allocateRules"
      label-width="90px"
    >
      <div class="dialog">
        <div class="title">
          <div class="line"></div>
          <div class="bt">客户参数</div>
        </div>

        <el-row :gutter="20">
          <re-col :value="12" :xs="24" :sm="24">
            <el-form-item label="客户标签:" prop="tag_id">
              <el-select
                v-model="newFormInline.tag_id"
                placeholder="请选择"
                class="w-full"
                clearable
              >
                <el-option
                  v-for="(item, index) in newFormInline.labelOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </re-col>
          <re-col :value="12" :xs="24" :sm="24">
            <el-form-item label="数据来源:" prop="source">
              <el-select
                v-model="newFormInline.source"
                placeholder="请选择"
                class="w-full"
                clearable
              >
                <el-option
                  v-for="(item, index) in newFormInline.sourceOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </re-col>
          <re-col :value="12" :xs="24" :sm="24">
            <el-form-item label="最新意向:" prop="intend_status">
              <el-select
                v-model="newFormInline.intend_status"
                placeholder="请选择"
                class="w-full"
                multiple
                collapse-tags
                clearable
              >
                <el-option
                  v-for="(item, index) in intentionOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </re-col>
          <re-col :value="12" :xs="24" :sm="24">
            <el-form-item label="被拨次数:" prop="called_times">
              <el-input
                type="number"
                v-model="newFormInline.called_times"
                placeholder="请输入"
                clearable
              >
                <template #prepend>低于</template>
              </el-input>
            </el-form-item>
          </re-col>
          <re-col :value="14" :xs="24" :sm="24">
            <el-form-item label="入池时间:" prop="entry_at">
              <el-date-picker
                v-model="newFormInline.entry_at"
                type="daterange"
                class="w-[240px]!"
                unlink-panels
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :shortcuts="shortcuts"
                value-format="X"
              />
            </el-form-item>
          </re-col>
        </el-row>
      </div>

      <div class="dialog">
        <div class="title">
          <div class="line"></div>
          <div class="bt">选择对象</div>
        </div>

        <el-row :gutter="20">
          <re-col :value="12" :xs="24" :sm="24" required>
            <el-form-item label="目标人员:" prop="staffId">
              <el-select
                v-model="newFormInline.staffId"
                placeholder="请选择"
                class="w-full"
                clearable
                @visible-change="(e)=>{
                  if(e == true) getUser()
                }"
              >
                <el-option v-for="item in userList" :key="item.id" :label="item.nickname" :value="item.id" />
              </el-select>
            </el-form-item>
          </re-col>
        </el-row>
      </div>

      <div class="dialog">
        <div class="title">
          <div class="line"></div>
          <div class="bt">分配逻辑</div>
        </div>

        <el-row :gutter="20">
          <re-col :value="12" :xs="24" :sm="24" required>
            <el-form-item label="分配数量:" prop="number">
              <el-input v-model="newFormInline.number" placeholder="请输入" type="number"></el-input>
            </el-form-item>
          </re-col>
        </el-row>
      </div>


    </el-form>

    <el-button type="info" :icon="useRenderIcon('ri:brush-2-line')" plain @click="resetForm(ruleFormRef)">重置条件</el-button>
  </div>
</template>

<style lang="scss" scoped>
.dialog {
  width: 100%;
  background-color: #f3f6f9;
  padding: 0 20px;
  margin-bottom: 15px;
  border-radius: 7px;
  padding-bottom: 10px;

  .title {
    font-weight: bold;
    display: flex;
    align-items: center;
    height: 50px;

    .line {
      width: 4px;
      height: 15px;
      border-radius: 5px;
      background-color: var(--pure-theme-menu-active-before);
      margin-right: 10px;
    }

    .bt{
      font-size: 14px;
      color: #000;
      font-weight: bold;
    }
  }
}
</style>
